<!DOCTYPE html>
<html lang="cn" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="/web页面/logo3.png" type="image/png">

    <title>商品详情</title>
    <script src="axios.min.js"></script>
    <script src="vue.global.js"></script>
    <style>
        /* 添加一些全局样式 */
        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #e1dbdb;
            color: #333;
        }

        #app {

            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

            padding: 50px;
            max-width: 1200px;
            margin: 40px auto;
        }

        .product-info {
            display: flex;
            align-items: center; /* 垂直居中对齐 */
            margin-bottom: 40px;
        }

        .product-image {
            flex: 0 0 auto; /* 不放大也不缩小，保持原始尺寸 */
            margin-right: 30px; /* 与详情部分间隔 */
        }

        .product-image img {
            border-radius: 8px;
            width: 500px; /* 图片宽度 */
            height: auto;
        }

        .product-details {
            flex: 1; /* 占据剩余空间 */
            text-align: justify;
            padding: 20px;
            background-color: #eed7d7;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        /* 按钮样式 */
        button {
            background-color: #ff5722;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            margin-right: 10px;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }

        button:hover {
            background-color: #f4511e;
        }

        /* 输入框和选择框样式 */
        input[type="number"], select {
            padding: 10px;
            margin: 10px 0;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            max-width: 200px;
        }

        /* 总价值样式 */
        .price {
            font-size: 1.5em;
            color: #e74c3c;
        }

        /* 其他样式 */
        h3 {
            margin-top: 20px;
            color: #333;
        }

    </style>
</head>
<body >
<div id="app">
    <div class="product-info">
        <div class="product-image">
            <img v-bind:src="goods.pic" alt="商品图片">
        </div>
        <div class="product-details">
            <h2 v-text="goods.name" class="name"></h2>
            <p v-text="goods.detail" class="detail"></p>
            <div>
                库存：<span v-text="goods.stock" class="stock"></span>
            </div>
            <div>
                售价：<span v-text="'￥'+goods.price" class="price"></span>
            </div>
        </div>
    </div>
<div>
<h3>用户下单</h3>
    购买数量：<input type="number" id="num" v-model.number="quantity" min="1" :max="goods.stock">    <div>
        总价值：<span v-text="'￥'+totalPrice" class="price"></span>
    </div>

<br>

支付方式：<select id="paymentMethod" name="paymentMethod">
    <option value="1"> 现金</option>
    <option value="2">微信</option>
    <option value="3">支付宝</option>
    <option value="4">网银</option>

</select>
<button v-on:click="this.buy">立即下单</button>
<button v-on:click="saveCarts(goods.id)">加入购物车</button>
</div>
</div>
<script>
    const app = {
        data() {
            return {
                goods:{},
            quantity:1
            }
        },
        computed: {
            totalPrice() {
                // 计算总价值，确保数量和价格都是数字类型
                return this.quantity * this.goods.price;
            }
        },
        methods: {
            getById:function (){
                axios({
                    method:'post',
                    url:'/getById?id='+this.getURLSearchParams('id'),
                    data:{
                        id:this.getURLSearchParams('id')
                    }
                }).then((response)=>{
                    this.goods=response.data
                });
            },

            buy: function() {
                // 实现购买逻辑
               console.log('商品开始下单');

                axios({
                    method: 'post',
                    url: '/buy',
                    data: {
                        good_id: this.goods.id,
                        num: document.getElementById('num').value,
                        paymentMethod: parseInt(document.getElementById('paymentMethod').value, 10),

                    }
               }).then((response)=>{
                   if (response.data === 'ok') {
                       alert("下单成功！")

                       //购买成功跳转到订单页
                       window.location.href = '/orders.html'
                   }
                   else if (response.data==='库存不足！'){
                       alert("库存不足")
                   }
                   else{
                       window.open('/login2.html', '_blank');

                   }
               })
            },
            //添加商品到购物车
            saveCarts: function (good_id) {
                console.log('已加入购物车');
                axios({
                    method: "post",
                    url: "/saveCarts",
                    data: {
                        good_id: good_id,
                        num: document.getElementById('num').value,
                    }
                }).then((response) => {
                    if (response.data === 'ok') {
                        alert("加入购物车成功！")
                        window.location.href="/carts.html"
                    } else {
                        alert(response.data)
                        window.open('/login2.html', '_blank');

                    }
                });
            },
            //取地址栏中变量的名字
            getURLSearchParams: function (name) {
                return new URLSearchParams(window.location.search).get(name)
            }
        },
        mounted() {
            console.log("vue启动成功！")
            this.getById()
        }
    }
    Vue.createApp(app).mount("#app")
</script>

</body>
</html>
